<template>
  <Card :title="t('routes.dashboard.scheduleManagement')" v-bind="$attrs">
    <FullCalendar :options="calendarOptions" />
  </Card>
</template>

<script setup>
  import { Card } from 'ant-design-vue';
  import FullCalendar from '@fullcalendar/vue3';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  import zhLocale from '@fullcalendar/core/locales/zh-cn';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const calendarOptions = {
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    height: 400, // 日历高度
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth',
    },
    handleWindowResize: true, //随浏览器窗口变化
    locale: zhLocale, // 设置成中文显示
    firstDay: 1, // 设置一周从周一开始
    isRTL: false, // 设置为ture时则日历从右往左显示，貌似是针对阿拉伯人设计的。
    weekends: true, // 是否显示周末，设为false则不显示周六和周日。
    hiddenDays: [], // 隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
    weekNumbers: false, // 是否在日历中显示周数，默认不显示。
    dateClick: function (params) {
      console.log(params); // 点击的日期
    },
  };
</script>
